<template>
  <div class="app-container">
  <!--查询条件开始-->
  <el-form ref="queryParams" :inline="true" :model="queryParams" class="demo-form-inline">
  <el-form-item label="挂号费用名称" prop="regItemName">
    <el-input v-model="queryParams.regItemName" placeholder="请输入挂号费用名称"></el-input>
  </el-form-item>
  <el-form-item label="状态" prop="status">
    <el-select
     v-model="queryParams.status" 
     placeholder="请选择状态">
      <el-option 
      v-for="dict in statusOptions"
      :key="dict.dictValue"
      :label="dict.dictLabel" 
      :value="dict.dictValue" />
    </el-select>
  </el-form-item>
  <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="normal" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  </el-form-item>
</el-form>
  <!--查询条件结束-->
  <!--表头按钮开始-->
   <el-row :gutter="10" style="margin-bottom: 8px;">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除</el-button>
      </el-col>
    </el-row>
  <!--表头按钮结束-->
  <!--表格数据开始-->
    <template>
    <el-table
    v-loading="loading"
      :data="registeredItemTableList"
      @selection-change="handleSelectionChnage"
      border
      >
      <el-table-column type="selection"  width="55"/>
      <el-table-column  label="挂号费ID" prop="regItemId" align="center" />
      <el-table-column  label="挂号费名称" prop="regItemName" align="center" />
      <el-table-column  label="挂号费 " prop="regItemFee" align="center" />
      <el-table-column  label="状态" prop="status" align="center" :formatter="statusFormatter" />
      <el-table-column  label="创建时间" prop="createTime" align="center" />
      <el-table-column  label="操作"  align="center" >
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button type="text" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row)">删除</el-button>
          </template>
      </el-table-column>
    </el-table>
  </template>
  <!--表格数据结束-->
  <!--分页插件开始-->
  <el-pagination
      v-show="total>0"  
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryParams.pageNum"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  <!--分页插件结束-->
  <!--添加修改弹出层开始-->
  <el-dialog
  :title="title"
  center
  :visible.sync="open"
  width="500px"
  append-to-body
  >
  <el-form ref="form" :model="form" :rules="rules" label-width="100px">
    <el-row>
      <el-col :span="24">
    <el-form-item  label="项目名称" prop="regItemName">
      <el-input  v-model="form.regItemName" placeholder="项目名称" clearable size="small"/>
      </el-form-item>
      </el-col>
    </el-row>
     <el-row>
      <el-col :span="24">
      <el-form-item  label="项目费用" prop="regItemFee">
      <el-input-number  v-model="form.regItemFee" placeholder="请输入项目费用" clearable size="small" :precision="2" :step="0.1" :min="0"/>
      </el-form-item>
         </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
      <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictValue"
              :value="dict.dictValue"
            >{{ dict.dictLabel }}</el-radio>
          </el-radio-group>
        </el-form-item>
           </el-col>
    </el-row>
  </el-form>
    
 <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
</el-dialog>
  <!--添加修改弹出层结束-->
  </div>
</template>
<script>
import {listRegisteredItemForPage,addRegisteredItem,deleteRegisteredItemByIds,getRegisteredItemById,updateRegisteredItem} from '@/api/system/registeredItem'
export default {
  data(){
    return {
      //遮罩
      loading:false,
      //查询参数 
      queryParams:{
        pageNum :1,
        pageSize : 10,
        regItemName : undefined,
        status : undefined
      },
      //状态数据字典
      statusOptions:[],
      //弹出层显示与隐藏
      open:false,
      //表格数据
      registeredItemTableList:[],
      //条数
      total:0,
      //非单选禁用
      single:true,
      //非多选禁用
      multiple:true,
      //被选中的集合
      ids:[],
      //弹出层标题
      title:"",
      //弹出层form
      form:{},
      rules:{
        regItemName:[
          {required: true, message: '挂号费用名称', trigger: 'blur'}
        ]
      }

    }
  },
  //钩子函数
  created(){
    //初始化状态字典
    this.getDataByType("sys_normal_disable").then(res =>{
      this.statusOptions = res.data
    })
    this.getlistRegisteredItemForPage()

  },
  methods:{
    //查询表格数据
    getlistRegisteredItemForPage(){
      this.loading = true
        listRegisteredItemForPage(this.queryParams).then(res =>{
          this.registeredItemTableList = res.data
          this.total = res.total
          this.loading = false
        })
    },
    //查询
    handleQuery(){
        this.getlistRegisteredItemForPage()
    },
    //重置
    resetQuery(){
      this.resetForm('queryParams')
      this.getlistRegisteredItemForPage()

    },
    //新增
    handleAdd(){
      this.title = '添加挂号费用'
      this.reset()
      this.open = true

    },
    handleUpdate(row){
      this.title = '修改挂号费用'
      this.reset()
      let RegisteredItemId = row.regItemId ===undefined ?this.ids[0]:row.regItemId
      getRegisteredItemById(RegisteredItemId).then(res =>{
        this.form = res.data
         this.open = true
      })

    },
    handleDelete(row){
       let RegisteredItemIds = row.regItemId === undefined ? this.ids :row.regItemId
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteRegisteredItemByIds(RegisteredItemIds).then(res =>{
          this.msgSuccess("删除成功")
          this.getlistRegisteredItemForPage()
      })
        }).catch(() => {
         this.msgInfo("取消删除")    
        });
     
    },
    handleSelectionChnage(selection){
        this.ids = selection.map(item => item.regItemId)
        console.log(selection.length)
        this.single = !(selection.length ==1)
        this.multiple = !(selection.length >0)
    },
    //翻译字典
    statusFormatter(row){
       return  this.selectDictLabel(this.statusOptions,row.status)
    },
    //页大小改变事件
    handleSizeChange(val){
      this.queryParams.pageSize = val
      this.getlistRegisteredItemForPage()
    },
    //页面跳转事件
    handleCurrentChange(val){
      this.queryParams.pageNum = val
      this.getlistRegisteredItemForPage()

    },
    //添加修改确定
    handleSubmit(){
        this.$refs['form'].validate((valid) => {
          if (valid) {
      //ture 添加
      if(this.form.regItemId === undefined){
          addRegisteredItem(this.form).then(res =>{
            this.msgSuccess('保存成功')
            this.open = false
            this.getlistRegisteredItemForPage()
          })
      }else{
        updateRegisteredItem(this.form).then(res =>{
          this.msgSuccess('修改成功')
            this.open = false
            this.getlistRegisteredItemForPage()
           })
         }
        }
      })
    },
    //取消
    cancel(){
      this.open =false

    },
    reset(){
      this.resetForm('form')
      this.form={
        regItemId:undefined,
        regItemName:undefined,
        regItemFee:'0.00',
        status:'0',
      }
    }

  },
  //监听
  watch:{
    'queryParams.regItemName':{
      handler(newVal,oldVal){
        this.queryParams.pageNum = 1 
        this.getlistRegisteredItemForPage();
      },
      deep:true
    },
    'queryParams.status':{
      handler(newVal,oldVal){
        this.queryParams.pageNum = 1 
        this.getlistRegisteredItemForPage();
      },
      deep:true,
      //immediate 首次绑定是否执行handler
    }
    

  }
  
}
</script>